<template>
  <div class="DetailGoodsInfo">
  <div v-if="Object.keys(detailInfo).length !== 0">
   <div class="desc">{{detailInfo.desc}}</div>
    <p class="key">{{detailInfo.detailImage[0].key}}</p>
     <div class="itemImg"  >
      <img v-for="item in detailInfo.detailImage[0].list"  :src="item" alt="" @load="imgLoad">
     </div>
   </div>
  </div>
</template>

<script>
  export default {
    name:"DetailGoodsInfo",
    props:{
     detailInfo:{
         type:Object,
         default(){
           return {}
         }
     }
    },
    methods:{
    imgLoad(){
      this.$emit('imgLoad')
    }

    }
  }
</script>

<style  scoped>
.DetailGoodsInfo{
font-size: 14px;
margin: 20px 10px;
background-color: #fff;
}
.desc{
padding: 0  10px;
color: rgb(24, 24, 24);
margin-bottom: 20px;
background-color: #fff;
}
.key{
font-size: 18px;
padding: 6px;
font-weight:800;
margin-bottom: 20px;
}
.itemImg{
background-color: #fff;
text-align: center;
}
.itemImg img{
width: 100%;
}

</style>
